<template>
  <div class="page-content user">
    <div class="header">
      <el-card class="box-card demo">
        <div slot="header" class="clearfix">
          <span>{{ cardForm.company }}</span>
        </div>
        <div class="text item">
          <p>地址：{{ cardForm.address }}</p>
          <p>电话：{{ cardForm.tel }}</p>
          <p>Q Q：{{ cardForm.qq }}</p>
          <p>主营：{{ cardForm.business }}</p>
        </div>
      </el-card>
    </div>

    <div class="info">
      <h1 class="title">名片设置</h1>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-form
          :model="cardForm"
          class="form"
          :rules="rules"
          ref="cardForm"
          label-width="86px"
          label-position="left"
        >
          <el-form-item label="所属地区：">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-cascader
                size="large"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange"
                placeholder="请选择所属地区"
              >
              </el-cascader>
            </el-col>
          </el-form-item>

          <el-form-item label="名称：" prop="company">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input
                v-model="cardForm.company"
                placeholder="请输入公司名称"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="地址：" prop="address">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input
                v-model="cardForm.address"
                placeholder="请输入公司地址"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="电话：" prop="tel">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="cardForm.tel" placeholder="请输入公司电话" />
            </el-col>
          </el-form-item>
          <el-form-item label="QQ：" prop="qq">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input v-model="cardForm.qq" placeholder="请输入公司电话" />
            </el-col>
          </el-form-item>
          <el-form-item label="主营：" prop="business">
            <el-col :xs="24" :sm="24" :lg="24">
              <el-input
                v-model="cardForm.business"
                type="textarea"
                placeholder="请输入公司主营"
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSave('cardForm')"
              icon="el-icon-check"
              >保存</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-connection"
              @click="initQrcode"
              >重新绑定微信</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <el-card class="box-card qrcode">
          <p><el-image style="width: 210px" :src="url"></el-image></p>
          <p>
            <i class="el-icon-share"></i>
            <span>微信扫一扫分享</span>
          </p>
        </el-card>
      </el-col>
      <el-dialog
        title="重新绑定微信"
        :visible.sync="bindVisible"
        width="18%"
        @close="qrcodestop"
        custom-class="qrdig"
      >
        <p><el-image style="width: 210px" :src="bindurl"> </el-image></p>
        <p ref="qrtext"></p>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { iwebApi } from "@/api/cardApi";
import { AdminCardEditApi } from "@/api/cardApi";
import { qrcodeApi } from "@/api/cardApi";
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
export default {
  inject: ["reload"],
  computed: {
    ...mapState({
      userInfo: state => state.user.user.info
    })
  },
  data() {
    return {
      cardForm: {
        company: "",
        address: "",
        tel: "",
        qq: "",
        business: ""
      },
      url: "http://www.iqp168.com/src/assets/img/qrcard.png",
      bindurl: "",
      options: regionData,
      selectedOptions: [],
      cityData: "",
      rules: {
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入公司地址", trigger: "blur" }
        ],
        tel: [{ required: true, message: "请输入公司电话", trigger: "blur" }],
        qq: [{ required: true, message: "请输入公司QQ", trigger: "blur" }],
        business: [
          { required: true, message: "请输入公司主营", trigger: "blur" }
        ]
      },
      bindVisible: false
    };
  },
  mounted() {
    this.iwebData();
  },
  methods: {
    iwebData() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      iwebApi({
        guestcode: guestcode,
        gscode: gscode,
        username: username,
        userid: userid,
        menuename: "CardSettings",
        menucname: "名片设置",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.cardForm = res;
        let areacodeData = [];
        areacodeData.push(res.province);
        areacodeData.push(res.city);
        areacodeData.push(res.district);
        this.selectedOptions = this.getTextToCode(areacodeData);
      });
    },
    initQrcode() {
      this.bindVisible = true;
      this.getQRcodeStauts();
      window.invl = setInterval(this.getQRcodeStauts, 2500);
    },
    getQRcodeStauts() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let qrcodekey = localStorage.rqrcodekey;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      qrcodeApi({
        guestcode: guestcode,
        gscode: gscode,
        qrcodeKey: qrcodekey,
        username: username,
        userid: userid,
        menuename: "CardSettings",
        menucname: "名片设置",
        logintype: logintype,
        posttype: posttype,
        op_type: "绑定",
        note: qrcodekey
      }).then(res => {
        localStorage.setItem("rqrcodekey", res.qrcodekey);
        let url = window.location.href;
        let posturl = "http://192.168.0.88:888";
        if (url.indexOf("192.168.1") < 0) {
          posturl = "http://wx.inheartsoft.com";
        }
        let qrdata = encodeURIComponent(
          posturl +
            "/wxapp/Cardds_bind.aspx?key=" +
            guestcode +
            "&scan=" +
            res.qrcodekey +
            "&gscode=" +
            gscode +
            "&name=" +
            this.cardForm.company
        );
        this.bindurl =
          "http://wx.inheartsoft.com/2DCode.ashx?" + "data=" + qrdata;
        switch (res.status) {
          case "QRCODE_SCAN_NEVER":
            this.$refs.qrtext.innerHTML = "微信扫码绑定名片";
            this.$refs.qrtext.style.color = "#606266";
            break;
          case "QRCODE_SCAN_ING":
            this.$refs.qrtext.innerHTML = "已扫描，等待手机确认操作";
            this.$refs.qrtext.style.color = "#21D86E";
            this.bindurl = "http://www.iqp168.com/src/assets/img/sqrcode.png";
            break;
          case "QRCODE_SCAN_SUCC":
            clearInterval(window.invl);
            this.$refs.qrtext.innerHTML = "正在绑定中···";
            this.$message.success("绑定成功");
            this.qrcodestop();
            this.bindVisible = false;
            break;
          case "QRCODE_SCAN_FAIL":
            clearInterval(window.invl);
            this.$message.error("绑定错误，请重新扫码绑定");
            break;
        }
      });
    },
    qrcodestop() {
      clearInterval(window.invl);
      this.clear_data();
    },
    clear_data() {
      window.localStorage.removeItem("rqrcodekey");
    },
    onSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          this.cityData = this.getCodeToText(this.selectedOptions);
          let province = this.cityData.split(",")[0];
          let city = this.cityData.split(",")[1];
          let district = this.cityData.split(",")[2];
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          AdminCardEditApi({
            guestcode: guestcode,
            gscode: gscode,
            company: this.cardForm.company,
            address: this.cardForm.address,
            tel: this.cardForm.tel,
            qq: this.cardForm.qq,
            business: this.cardForm.business,
            province: province,
            city: city,
            district: district,
            menuename: "CardSettings",
            menucname: "名片设置",
            username: username,
            userid: userid,
            logintype: logintype,
            posttype: posttype,
            op_type: "保存",
            note: JSON.stringify(this.cardForm)
          }).then(res => {
            if (res.code == "0") {
              this.$message.success(res.msg);
              this.refresh();
            }
          });
        } else {
        }
      });
    },
    refresh() {
      this.reload();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(value) {
      this.cityData = this.getCodeToText(value);
    },
    getCodeToText(codeArray) {
      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "," + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "," +
            CodeToText[codeArray[1]] +
            "," +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      return area;
    },
    getTextToCode(TextArray) {
      let areacode = [];
      switch (TextArray.length) {
        case 1:
          areacode.push(TextToCode[TextArray[0]].code);
          break;
        case 2:
          areacode.push(TextToCode[TextArray[0]].code);
          areacode.push(TextToCode[TextArray[0]][TextArray[1]].code);
          break;
        case 3:
          areacode.push(TextToCode[TextArray[0]].code);
          areacode.push(TextToCode[TextArray[0]][TextArray[1]].code);
          areacode.push(
            TextToCode[TextArray[0]][TextArray[1]][TextArray[2]].code
          );
          break;
      }
      return areacode;
    }
  }
};
</script>

<style lang="scss">
.user {
  .icon {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
.qrdig {
  .el-dialog__body {
    text-align: center;
  }
  p {
    padding-bottom: 5px;
  }
}
</style>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .demo {
    font-size: 14px;
    .clearfix:before,
    ::v-deep .el-card__header {
      padding: 8px 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 16px;
      color: #fff;
      background-color: #2d8cf0;
    }
  }
  .qrcode {
    margin: 30px auto;
    text-align: center;
    width: 50%;
    color: #2d8cf0;
    font-size: 14px;
    p {
      padding-bottom: 10px;
    }
  }
  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }

        a {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
          text-decoration: none;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    margin-top: 15px;
    background: #fff;
    overflow: hidden;
    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }
    .qrcode {
      width: 90%;
      .el-image {
        width: 100% !important;
      }
    }
    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>
